<template>
  <img
    class="custom-img"
    :src="src"
    :alt="name"
    srcset=""
    @click.stop="handlePreview"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getBlobDownloadFile } from "@/api/module/commone";
import { layer } from "@layui/layui-vue";

const props = defineProps(["data"]);

const name = props.data.split("|")[0];
const code = props.data.split("|")[1];

const src = ref<string>("");

const convertBlobToBase64 = (blob) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onloadend = () => resolve(reader.result);
    reader.onerror = (err) => reject(err);

    reader.readAsDataURL(blob);
  });
};

const handlePreview = () => {
  layer.photos({
    imgList: [
      {
        src: src.value,
        alt: name,
      },
    ],
  });
};

getBlobDownloadFile(code).then(async (res) => {
  const base64 = await convertBlobToBase64(res);
  src.value = base64 as string;
});
</script>

<style scoped lang="less">
.custom-img {
  margin-left: 10px;
  &:first-child {
    margin-left: 0;
  }
}
</style>
